[자바스크립트] 백그라운드(background) 경로, 주소 불러오기, getComputedStyle()

이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.

# 자바스크립트를 사용하여 백그라운드 정보, url 등을 불러오는 방법

아래 함수는 적용된 백그라운드의 다양한 정보를 불러옵니다.

window.getComputedStyle(해당 엘리먼트)

적용된 엘리먼트는 아래의 함수를 사용하여 브라우저에 적용된 모든 CSS 스타일을 불러올 수 있습니다. 아래의 함수를 사용해야 원하는 스타일을 가져올 수 있죠.

getPropertyValue(가져올 스타일 속성) 이제 해당요소에 적용된 특정 스타일 값만 불러올 수 있습니다. 아래의 예제에서 더 자세히 알아보세요.

# Background 정보 불러오기 예제보기

간단한 예제로 알아봅니다. 만약 브라우저에 적용된 스타일 중 display, margin, background-image 값을 불러오려면 어떻게 할까요?

위 코드를 실행하면 아래와 같이 값들이 콘솔에 출력됩니다.
여기서는 3가지 속성값을 얻어왔지만 더 다양한 스타일도 똑같은 방법으로 얻어올 수 있습니다.

! 마치면서

위에서 얻어낸 이미지 경로를 브라우저 창에 url을 입력하면 동작 여부를 확인할 수 있습니다. 잘 얻어온 경우 해당 이미지가 출력될 것입니다.